<template>
  <el-dialog 
    :model-value="visible" 
    title="订单详情" 
    width="800px"
    :close-on-click-modal="false"
    @update:model-value="handleClose"
  >
    <div v-if="orderDetail" class="order-detail-content">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="detail-card-header">
            <h4>基本信息</h4>
            <el-tag :type="getStatusTag(orderDetail.orderStatus)" size="large">
              {{ getStatusText(orderDetail.orderStatus) }}
            </el-tag>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">订单号：</span>
              <span class="detail-value">{{ orderDetail.orderNumber }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">创建时间：</span>
              <span class="detail-value">{{ orderDetail.createdAt }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">支付方式：</span>
              <span class="detail-value">{{ orderDetail.paymentMethod }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">备注：</span>
              <span class="detail-value">{{ orderDetail.remark || '无' }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 寄件人信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <h4>寄件人信息</h4>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">姓名：</span>
              <span class="detail-value">{{ orderDetail.senderName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">电话：</span>
              <span class="detail-value">{{ orderDetail.senderPhone }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="detail-item">
              <span class="detail-label">地址：</span>
              <span class="detail-value">{{ orderDetail.senderAddress }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 收件人信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <h4>收件人信息</h4>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">姓名：</span>
              <span class="detail-value">{{ orderDetail.receiverName }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">电话：</span>
              <span class="detail-value">{{ orderDetail.receiverPhone }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="detail-item">
              <span class="detail-label">地址：</span>
              <span class="detail-value">{{ orderDetail.receiverAddress }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 物品信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <h4>物品信息</h4>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">重量：</span>
              <span class="detail-value">{{ orderDetail.itemWeight }} kg</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">体积：</span>
              <span class="detail-value">{{ orderDetail.itemVolume }} m³</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">物品类型：</span>
              <span class="detail-value">{{ orderDetail.itemType }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">保价金额：</span>
              <span class="detail-value">¥{{ orderDetail.insuredValue }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 费用信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <h4>费用明细</h4>
        </template>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">基础费用：</span>
              <span class="detail-value">¥{{ orderDetail.baseFee }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">重量费用：</span>
              <span class="detail-value">¥{{ orderDetail.weightFee }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">服务费用：</span>
              <span class="detail-value">¥{{ orderDetail.serviceFee }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item">
              <span class="detail-label">保险费用：</span>
              <span class="detail-value">¥{{ orderDetail.insuranceFee }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="detail-item total-fee">
              <span class="detail-label">总费用：</span>
              <span class="detail-value total-amount">¥{{ orderDetail.totalFee }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 配送员信息 -->
      <el-card v-if="orderDetail.delivererId" class="detail-card" shadow="never">
        <template #header>
          <h4>配送员信息</h4>
        </template>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="detail-item">
              <span class="detail-label">配送员ID：</span>
              <span class="detail-value">{{ orderDetail.delivererId }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button 
          v-if="orderDetail && orderDetail.orderStatus === 3 && showSignButton && !isAdmin"
          type="primary" 
          @click="handleSign"
        >
          确认签收
        </el-button>
        <el-button 
          v-if="isAdmin && orderDetail && orderDetail.orderStatus < 4"
          type="warning" 
          @click="handleUpdateStatus"
        >
          更新状态
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElDialog, ElCard, ElRow, ElCol, ElTag, ElButton } from 'element-plus'
import type { DeliveryOrder } from '@/api/user'

interface Props {
  visible: boolean
  orderDetail: DeliveryOrder | null
  showSignButton?: boolean
  isAdmin?: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'close'): void
  (e: 'sign', order: DeliveryOrder): void
  (e: 'status-update'): void
}

const props = withDefaults(defineProps<Props>(), {
  showSignButton: true
})

const emit = defineEmits<Emits>()

// 根据状态获取标签类型
const getStatusTag = (status: number) => {
  const statusMap: Record<number, 'info' | 'warning' | 'primary' | 'success' | 'danger'> = {
    0: 'danger',
    1: 'warning',
    2: 'primary',
    3: 'info', 
    4: 'success'
  }
  return statusMap[status] || 'info'
}

// 根据状态获取文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    0: '待揽收',
    1: '待发货',
    2: '运输中', 
    3: '待签收',
    4: '已完成'
  }
  return statusMap[status] || '未知状态'
}

// 处理关闭事件
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 处理签收事件
const handleSign = () => {
  if (props.orderDetail) {
    emit('sign', props.orderDetail)
  }
}

// 处理管理员更新状态事件
const handleUpdateStatus = () => {
  emit('status-update')
}
</script>

<style scoped>
/* 订单详情模态框样式 */
.order-detail-content {
  max-height: 600px;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 16px;
  border: 1px solid #e4e7ed;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-card-header h4 {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  min-height: 24px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #909399;
  font-size: 14px;
  min-width: 80px;
  flex-shrink: 0;
}

.detail-value {
  color: #606266;
  font-size: 14px;
  flex: 1;
  word-break: break-all;
}

.total-fee .detail-label,
.total-fee .detail-value {
  font-weight: 600;
  font-size: 16px;
}

.total-amount {
  color: #e6a23c;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .detail-label {
    margin-bottom: 4px;
    min-width: auto;
  }
}
</style> 